import { Component } from 'vue/types'

interface AsyncComponentFunction {
  (): {
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: Promise<any>
    // 异步组件加载时使用的组件
    loading?: any
    // 加载失败时使用的组件
    error?: any
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout?: number
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    // 不知道为什么我用不了这个
    delay?: number
  }
}

const AsyncComponent = function(): Promise<any> {
  const asyncHandler: AsyncComponentFunction = () => ({
    component: new Promise(function(resolve: Function) {
      setTimeout(function() {
        resolve(import('./AsyncComponent.vue'))
      }, 3000)
    }),
    loading: require('./AsyncLoading.vue').default,
    error: require('./AsyncError.vue').default,
    timeout: 4000,
  })

  return Promise.resolve<Component>({
    functional: true,
    render(h) {
      return h(asyncHandler as any)
    },
  })
}

export default AsyncComponent
